<template>
  <div class="singer">
    <ul class="singer-header">
      <li v-for="(item,index) in singerListStyle" :key="index" @click="handleChangeView(item)"
          :class="{active:item.name==activeName}">
        {{item.name}}
      </li>
    </ul>
    <div>
      <ContentList :contentList="newSingerList"></ContentList>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" background layout="prev,pager,next,total"
                       :current-page="currentPage" :page-size="pageSize" :total="singerList.length">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
import ContentList from "@/components/ContentList";
export default {
name: "Singer",
  components:{
    ContentList
  },
  mounted() {
  this.getAllSingerList()
  },
  data(){
  return{
    singerList:[],
    pageSize: 15,        //页面大小，一页有15条数据
    currentPage: 1,      //当前页，默认第一页
    singerListStyle:[
      {name: '全部歌手',sex: '-1'},
      {name: '男歌手',sex: '1'},
      {name: '女歌手',sex: '0'},
      {name: '组合歌手',sex: '2'}
    ],
    activeName:'全部歌手'
  }
  },
  methods:{
   async getAllSingerList(){
     let result=await this.$API.reqShowAllSinger()
     if (result.code==10000){
       this.singerList=result.data
     }else {
       this.$notify.error('系统异常')
     await  Promise.reject(new Error('fail'))
     }
    },
    handleCurrentChange(val){
      this.currentPage = val;
    },
    handleChangeView(item){
     this.activeName=item.name
      this.singerList=[]
      if (item.name=='全部歌手'){
        this.getAllSingerList()
      }else {
        this.getSingerBySex(item.sex)
      }
    },
    async getSingerBySex(sex){
    let result=await this.$API.reqShowSingerBySex(sex)
      if (result.code==10000){
        this.singerList=result.data
      }else {
        this.$notify.error('系统异常')
        await  Promise.reject(new Error('fail'))
      }
    }
  },
  computed:{
    newSingerList(){
      return this.singerList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/singer.scss';
.pagination{
  display: flex;
  justify-content: center;
}
</style>

